<script setup lang="ts">
    import { ref } from 'vue';
    import { api } from '@/services/api';
    import { UserInfo } from '@/services/type';

    import { useChatStore } from '@/stores/chat';
    import { useUserStore } from '@/stores/user';

    var { yhnm } = defineProps<{yhnm: string}>();

    const chatStore = useChatStore();
    const userStore = useUserStore();

    // 用户信息
    const userInfo = ref<Partial<UserInfo>>();

    const getUserInfo = async () => {
        const response = await api.user.getUserInfo({ yhnm });
        // 查询成功
        if(response.code === 0) {
            // 结果赋值
            userInfo.value = response.data;
        }
    }

    // 关注
    const handleFollow = async (yhnm?: string, is_follow?: boolean) => {
        const response = await userStore.follow(yhnm, is_follow);
        if(response.code === 0) {
            // 变更关注状态
            if(userInfo.value) {
                userInfo.value.is_follow = !is_follow;
            }
        }
    }

</script>

<template>
    <el-popover
        placement="bottom-start"
        :width="250"
        :show-arrow="false"
        :teleported="false"
        trigger="hover"
        :show-after="500"
        @show="getUserInfo"
    >
        <template #reference>
            <slot></slot>
        </template>
        <div class="user-card">
            <div class="user-cover">
                <div class="user-wrap" :style="{'background-image': 'url(' + userInfo?.cover + ')'}"></div>
                <div class="user-panel">
                    <div class="avatar" :style="{'background-image': 'url(' + userInfo?.avatar + ')'}"></div>
                    <div class="user-panel-info">
                        <a target="_blank">{{ userInfo?.nickName }}</a>
                        <p style="margin-top: 1px">{{ userInfo?.signature }}</p>
                    </div>
                </div>
            </div>
            <div class="user-info">
                <ul class="number-board">
                    <li class="number-board-item">
                        <a target="_blank">
                            <div class="number-board-name">文章</div>
                            <strong class="number-board-value">{{ userInfo?.tj_info?.article_num }}</strong>
                        </a>
                    </li>
                    <li class="number-board-item">
                        <a target="_blank">
                            <div class="number-board-name">评论</div>
                            <strong class="number-board-value">{{ userInfo?.tj_info?.comment_num }}</strong>
                        </a>
                    </li>
                    <li class="number-board-item">
                        <a target="_blank">
                            <div class="number-board-name">粉丝</div>
                            <strong class="number-board-value">{{ userInfo?.tj_info?.attention_num }}</strong>
                        </a>
                    </li>
                </ul>
                <div class="btn">
                    <div>
                        <el-button 
                            :type="!userInfo?.is_follow ? 'primary' : ''" 
                            @click="handleFollow(userInfo?.yhnm, userInfo?.is_follow)" 
                            :color="userInfo?.is_follow ? '#8a919f' : ''"
                            plain
                        >
                            <template v-if="!userInfo?.is_follow">
                                <el-icon><Plus /></el-icon>&nbsp;关注
                            </template>
                            <template v-if="userInfo?.is_follow">
                                <el-icon><Check /></el-icon>&nbsp;已关注
                            </template>
                        </el-button>
                    </div>
                    <div><el-button type="info" @click="chatStore.openChatBox(userInfo?.yhnm)"><el-icon><Message /></el-icon>&nbsp;私信</el-button></div>
                </div>
            </div>
        </div>
    </el-popover>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />